<template>
  <div>
    <button
      v-for="(item, index) in arr"
      :key="index"
      @click="activeName = item"
      :class="['tab-button', { active: item === activeName }]"
    >
      {{ item }}
    </button>
    <div class="tab" :is="activeName"></div>
  </div>
</template>
<script>
//@click="activeName=item"  //每次点击的时候，把item赋给activeName
//:class="['tab-button',{active:item===activeName}]"  //判断名称一不一样，一样的就给active属性
import Home from "./Home.vue";
import Email from "./Email.vue";
import PayList from "./PayList.vue";

export default {
  data() {
    return {
      activeName: "Home",
      arr: ["Home", "Email", "PayList"],
    };
  },
  components: {
    Home,
    Email,
    PayList
  },

};
</script>
<style>
.tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}

.tab-button:hover {
  background: #96cf54;
}

.tab-button.active {
  background: hotpink;
}

.tab {
  border: 1px solid #ccc;
  padding: 10px;
}

h1 {
  margin: 0;
}
</style>